<script setup>
import { onMounted, ref } from "vue";
import * as echarts from 'echarts';
import { getHomeStatistics } from "@/api/admin/home.js";

// 课程统计图参数
const courseOption = ref({
  title: {
    text: '平台课程统计（饼图）',
    subtext: '统计维度：课程类型',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '占比统计',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});

// 用户统计图参数
const userOption = ref({
  title: {
    text: '平台用户统计（饼图）',
    subtext: '统计维度：用户身份',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '占比统计',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});

// 收益统计图参数
const incomeOption = ref({
  title: {
    text: '近30天平台收益统计（折线图）',
    subtext: '维度统计：天数',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      const data = params[0];
      return `${data.name}<br/>收益：${data.value} 元`;
    },
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} 元'
    }
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true,
      areaStyle: {
        opacity: 0.3
      },
      itemStyle: {
        color: '#409EFF'
      },
      emphasis: {
        itemStyle: {
          color: '#409EFF',
          borderWidth: 3
        }
      }
    }
  ]
});

// 图表实例
let courseChart = null;
let userChart = null;
let incomeChart = null;

// 获取统计数据并更新图表
const fetchAndUpdateStatistics = async () => {
  try {
    const res = await getHomeStatistics();
    if (res.data.success) {
      const data = res.data.data;
      
      // 更新课程统计图
      courseOption.value.series[0].data = [
        { value: data.videoCount, name: '视频课程' },
        { value: data.articleCount, name: '图文课程' }
      ];
      courseChart.setOption(courseOption.value);

      // 更新用户统计图
      userOption.value.series[0].data = [
        { value: data.bloggerCount, name: '博主' },
        { value: data.userCount, name: '用户' }
      ];
      userChart.setOption(userOption.value);

      // 更新收益统计图
      incomeOption.value.xAxis.data = data.dailyIncomes.map(item => item.date);
      incomeOption.value.series[0].data = data.dailyIncomes.map(item => item.income);
      incomeChart.setOption(incomeOption.value);
    }
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};

// onMounted表示页面所有dom元素都初始化完成了
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  courseChart = echarts.init(document.getElementById('course'));
  courseChart.setOption(courseOption.value);

  userChart = echarts.init(document.getElementById('user'));
  userChart.setOption(userOption.value);

  incomeChart = echarts.init(document.getElementById('income'));
  incomeChart.setOption(incomeOption.value);

  // 获取并更新数据
  fetchAndUpdateStatistics();

  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    courseChart.resize();
    userChart.resize();
    incomeChart.resize();
  });
});
</script>

<template>
  <div style="margin:-10px 0 15px -10px" class="card" shadow="always">您好，管理员！欢迎使用本系统</div>
  <el-row :gutter="10" style="margin-left: -13px">
    <el-col :span="12" style="margin-bottom: 10px">
      <div class="card" style="padding: 20px; height: 400px" id="course"></div>
    </el-col>
    <el-col :span="12" style="margin-bottom: 10px">
      <div class="card" style="padding: 20px; height: 400px" id="user"></div>
    </el-col>
    <el-col :span="24" style="margin-bottom: 10px">
      <div class="card" style="padding: 20px; height: 400px" id="income"></div>
    </el-col>
  </el-row>
</template>

<style scoped>

</style>